<template>
  <div class="header-menu-click" @click.prevent="visible = true">
    <el-icon><ChatDotSquare /></el-icon>
    <span href="#">留言板</span>
  </div>
  <el-dialog width="400px" title="用户留言" v-model="visible" :modal="false">
    <div class="header space-y-2">
      <div class="box">
        <el-input
          v-model="postMsg.message"
          placeholder="请输入留言"
          type="textarea"
          :autosize="{ minRows: 2 }"
        ></el-input>
      </div>
      <div class="verify flex space-x-2 justify-center">
        <el-input class="flex-1" placeholder="昵称" v-model="postMsg.username"></el-input>
        <el-input
          class="flex-1"
          placeholder="验证码"
          v-model="postMsg.verify.verify_value"
        ></el-input>
        <img
          :src="verify.verify_img"
          alt=""
          class="w-20 cursor-pointer rounded"
          @click="refresh()"
        />
      </div>
      <div class="fnSize flex">
        <el-button class="flex-1" type="primary" @click="postMsgBoard">发送</el-button>
      </div>
    </div>
    <div class="border-t my-4 bg-gray-500"></div>
    <!-- 展示留言板区域 -->
    <div class="main">
      <div class="msg-list">
        <div class="msg-item" v-for="item in msgList" :key="item.id">
          <div class="item-name">
            {{ item.username }}
          </div>
          <div class="item-message">
            {{ item.message }}
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { ChatDotSquare } from '@element-plus/icons-vue';
  import { ref } from 'vue';

  // import type { IPostMsgData } from '@/api/leaveMsgApi';
  import useVerify from '@/hooks/api/useVerify';
  import useLeaveMsg from '@/hooks/api/useLeaveMsg';

  const visible = ref<Boolean>(false);

  const postMsg = ref({
    username: '我是名字',
    message: '我是回留言',
    verify: { verify_id: '', verify_value: '' },
  });

  const size = ref<number>(1);
  const page = ref<number>(10);
  const {
    data: msgList,
    loading: msgLoading,
    refresh: refreshMsgList,
    sendLeaveMsg,
  } = useLeaveMsg(size, page);
  const postMsgBoard = () => {
    postMsg.value.verify.verify_id = verify.value.verify_id;
    console.log(postMsg);
    const { data: sendStatus, loading: sendLoading } = sendLeaveMsg(postMsg.value);
  };

  const { verify, refresh } = useVerify();
</script>

<style lang="scss" scoped>
  .header-menu-click {
    @apply flex items-center;
  }
</style>
